<template>
  <div class="common-layout">
    <el-container>
      <el-header>

        <div style="color:aliceblue;font-size:20px;text-align:center;font-weight:bold  margin-left: 1000px;">
          我&nbsp;的&nbsp;测&nbsp;试&nbsp;系&nbsp;统</div>

        <div style="margin-left: 1000px;">
          欢迎你：{{ user ? user.username : ""
          }} {{ user && user.aid == 1 ? '管理员' : '一般用户' }}</div>
        <div> <el-badge :value="sum" class="item" style="margin-left: 10px;">
            <el-button @click="openMessage">消息</el-button>
          </el-badge></div>
        <div> <el-button style="margin-left: 10px;" type="warning" @click="logout">退出</el-button></div>

      </el-header>
      <el-container>
        <el-aside width="200px">
          <menuList></menuList>
        </el-aside>
        <el-container>
          <el-main>
            <RouterView></RouterView>
          </el-main>

        </el-container>

      </el-container>
    
    </el-container>
  </div>
</template>
<script>
import axios from "axios";
import menuList from "../components/menu.vue";
import { ElMessageBox } from 'element-plus'
import { ElNotification } from 'element-plus'
export default {
  components: {
    menuList
  },
  data() {
    return {
      user: {},
      message: [{}],
      sum: 0
    }
  },
  methods: {
    logout() {
      ElMessageBox.confirm(
        '你确定退出吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          sessionStorage.removeItem('user');
          this.$router.push("/")
        })
        .catch(() => {

        })
    },
    getMessage() {
      axios.get("/message/getMessageByUid/" + this.user.uid).then(res => {
        this.message = res.data.result
        this.sum = this.message.length
      })
    },
    setMessageIsRead()
    {
      axios.get("/message/setMessageReadUid/" + this.user.uid).then(res => {
        this.message = res.data.result
        this.sum = this.message.length
      })
    },

    openMessage() {
      this.message.forEach(element => {
        ElNotification.success({
          title: '提示',
          message: element.msg,
          duration: 0,
        })
      })
      ;
      this.sum = 0
      this.setMessageIsRead()
    }


  },

  mounted() {
    this.user = JSON.parse(sessionStorage.getItem("user"));
    this.getMessage();
  },
};
</script>
<style scoped>
.el-main {
  background-color: whitesmoke;
  height: 100%
}

.menuclass {
  position: absolute;
  width: 200px;
}

.content {
  width: 800px;
  float: left;

}

.el-header {
  height: 70px;
  background-color: #409EFF;
  background-image: url('../src/assets/header.png');
  background-repeat: no-repeat;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.el-footer {
  text-align: center;
  width: 100%;
  line-height: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #409EFF;
}
</style>
